
var Charts = require('../../../dist/wxcharts-min.js');       //引入wxcharts.js  

// 为了使canvas在不同屏幕自适应进行以下换算
const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;
const code_w = 600 / rate;
const code_h = 400 / rate;

Page({

  data: {
    code_w: code_w,      //柱状图的宽
    code_h: code_h,        //柱状图的高
    Time:0,
    totalList: [],

    width:0,
    height:0,
    widths:0,
    heights:0
  },

  onLoad: function (options) {
    this.charts()
    //时钟
    //将全局变量Index保存在that中，里面函数调用
		var that = this
		//获取系统信息
		wx.getSystemInfo({
			//获取系统信息成功，将系统窗口的宽高赋给页面的宽高
			success: function(res) {
        if (res.windowWidth>600){
          that.width = res.windowWidth/1.6
          that.widths = res.windowWidth
          console.log(that.width)
          that.height = res.windowHeight/1.6
          that.heights = res.windowHeight
        }
        else{
          that.width = res.windowWidth
          that.widths = res.windowWidth
          that.height = res.windowHeight
          that.heights = res.windowHeight
        }
        //that.width = res.windowWidth
        //console.log(res.windowWidth)
				//that.height = res.windowHeight
			}
		})
  },

  onShow: function (params) {
    const totalList=wx.getStorageSync("totalList");
    this.setData({totalList});
    var learnTime = 0.00
    for (var i = 0; i < totalList.length; i++) {
      var getSum = Math.floor(totalList[i]*100)/100
      //console.log(getSum)
      learnTime = Math.floor((learnTime + getSum)*100)/100
    }
    //console.log(learnTime)
    this.setData({
      Time:learnTime
    })
  },

  onReady: function () {
    //调用canvasClock函数
		this.canvasClock()
		//对canvasClock函数循环调用
		this.interval = setInterval(this.canvasClock,1000)
  },

  canvasClock: function(){
		var context = wx.createContext()//创建并返回绘图上下文（获取画笔）
		//设置宽高
    var width = this.width/1.5
    var widths = this.widths
    //console.log(width)
    var height = this.height
    var heights = this.heights
		//重置画布函数
		function reSet(){
			context.height = context.height;//每次清除画布，然后变化后的时间补上
            context.translate(widths/1.2, heights/0.81);//设置坐标轴原点
            context.save();//保存中点坐标1
		}
		//绘制中心圆和外面大圆
		function circle(){
			      //外面大圆
            context.setLineWidth(4);
            context.setStrokeStyle('#adaca5');
            context.beginPath();
            context.arc(0, 0, width/3-50, 0, 2 * Math.PI,true);
            context.closePath();
            context.stroke();
            
		}
  
    function smallGrid(){
      context.setLineWidth(0.1);
              context.rotate(-Math.PI/2);//时间从3点开始，倒转90度
              for(var i = 0; i < 60; i++) {
                  context.setStrokeStyle('#f5f5f4');
                  context.beginPath();
                  context.rotate(Math.PI / 30);
                  context.moveTo(width/3.5-40, 0);
                  context.lineTo(width/3.5-40, 0);
                  context.stroke();
              }
       }
    
         //指针运动函数
        function move(){
            var t = new Date();//获取当前时间
            var h = t.getHours();//获取小时
            h = h>12?(h-12):h;//将24小时制转化为12小时制
            var m = t.getMinutes();//获取分针
            var s = t.getSeconds();//获取秒针
            context.save();//再次保存2
            
            //旋转角度=30度*（h+m/60+s/3600）
            //分针旋转角度=6度*（m+s/60）
            //秒针旋转角度=6度*s
            
            
            //绘制时针
            context.setLineWidth(3);
            context.beginPath();
            context.setStrokeStyle('#f2c512');
            context.rotate((Math.PI/6)*(h+m/60+s/3600));
            context.moveTo(0,0);
            context.lineTo(width/4.5-40,0);
            context.stroke();
            context.restore();//恢复到2,（最初未旋转状态）避免旋转叠加
            context.save();//3
            
            //画分针
            context.setStrokeStyle('#f2c512');
            context.setLineWidth(3);
            context.setFillStyle('red')
            context.beginPath();
            context.rotate((Math.PI/30)*(m+s/60));
            context.moveTo(0,0);
            context.lineTo(width/3.6-40,0);
            context.stroke();
            context.restore();//恢复到3，（最初未旋转状态）避免旋转叠加
            context.save();
            
            //绘制秒针
            context.setStrokeStyle('#abf476');
            context.setLineWidth(2);
            context.beginPath();
            context.rotate((Math.PI/30)*s);
            context.moveTo(0,0);
            context.lineTo(width/3.4-40,0);
            context.stroke();
        }
        //调用
		function drawClock(){
			reSet();
      circle();
      smallGrid();
      move();
		}
    drawClock()  //调用运动函数
    
		// 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
		wx.drawCanvas({
			canvasId:'myCanvas',
			actions: context.getActions()
		})
	},
  //页面卸载，清除画布绘制计时器
	onUnload:function(){
		clearInterval(this.interval)
	},

  charts:function(){
    let _this=this
    return new Promise(function () {

    new Charts({
      canvasId: 'columnCanvas',
      dataPointShape: false,
      title:{
        name:'学习统计',
        fontSize:30,
        color:'#f2c512'
      },
      type: 'column',
      legend: false,
      background: '#f5f5f4',
      categories:['周一','周二','周三','周四','周五','周六','周日',],
     
      xAxis: {
        disableGrid: true,
        type: 'calibration'
      },
      series: [{
        name: '学习时长1',
        data: ['0.00','0.00','0.00','0.00','0.00','0.00','0.00',],
        color: '#f2c512'
        // color: "rgba(254,129,84,1)"
      }
      ],
      yAxis: {
        disableGrid: false,
        gridColor: "#e2e2cf",
        fontColor: "#ffffff",
        min: 0,
        max: _this.data.max,
        disabled: false,
        title:'学习时长/h',
        fontColor: "#000000",
        titleFontColor:"#000000"
      },
      dataItem: {
        color: "#7cb5ec"
      },
      width: code_w,
      height: code_h,
      extra: {
        column: {
          width: 20
        },

      }

    })
    })
  }
})
